<template>
	<view class="dingdan">
		<!-- 订单页面 -->
		<!-- 顶部固定栏 -->
		<view class="titlesHead">
			<view class="iconfont icon-fangxiang-xiangzuo icon" @click="yun"></view>
			<view class="titname"> 乐 居 </view>
			<view class="titRight"></view>
		</view>
		<view class="zhanwei">静安阿达</view>
		<!-- 选择收货地址 -->
		<view class="dizhi">
			<view class="xuanzhi">
				等待支付
			</view>
			<view class="shouhuo" @click="xuandizhi">
				<text v-if="!dizhi.id">去选择收货地址</text>
				<view class="quyu" v-if="dizhi.id">
					<view class="">
						名字： {{dizhi.name}}
					</view>
					<view class="">
						电话 : {{dizhi.phoneNumber}}
					</view>
					
					
				</view>
			</view>
		</view>
		<!-- 订单详情 -->
		<view class="quanbudingdan">
			
		<view class="xinagqing">
			<view class="box">
				<!-- 订单编号 -->
				<view class="numberID">
					<view class="lefts">
						订单编号 : {{order.orderSn}}
					</view>
					<view class="rights">
						等待支付
					</view>
				</view>
				<!-- 订单详情 -->
				<view class="particulars" v-if="ordeList" v-for="item in ordeList" :key="item.id">
					<view class="lefts">
						<image :src="item.productPic" mode=""></image>
					</view>
					<view class="rights">
						<!-- 商品名称 -->
						<view class="names">
							<view class="asyyds">
								{{item.productName}}
							</view>
							<view class="bsyyds">
								￥ {{item.realAmount}} 元
							</view>
						</view>
						<!-- 数量 -->
						<view class="number">
							<view class="num">
								数量
							</view>
							<view class="umer">
								X {{item.productQuantity}}
							</view>
						</view>
						<!-- 规格 -->
						<view class="specification">
							规格 :{{yangshi[0].key}}--{{yangshi[0].value}} : {{yangshi[1].key}}--{{yangshi[1].value}}
						</view>
					</view>
				</view>
				<!-- 总价格 -->
				<view class="amountotal">
					<view class="pramount">
						合计 :{{order.totalAmount}}元
					</view>
				</view>
				<!-- 确认付款按钮 -->
				<view class="btn">
					<view class="anniu" @click="taoqian">
						确认付款
					</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import{dingdanMingXi}from '@/api/dingdan/dingdan.js'
	export default {
		data() {
			return {
				// 订单ID
				order:[],
				// 订单详情
				ordeList:[],
				// 样式
				yangshi:'',
				// 地址数据
				dizhi: {}
				
			};
		},
		methods:{
			//点击返回上一页
			yun() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 点击选择地址
			xuandizhi(){
				uni.showToast({
					title:'选择地址',
					icon:"none",
					duration:1000,
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/location/location?type=1'
					})
				},1500)
				
			},
			// 点击确认付款
			taoqian(){
				if(this.$store.state.dizhi.id){
					
					// uni.navigateTo({
					// 	url:'/pages/payment/payment'
					// })
				} else{
					uni.showToast({
						title:'请选择收货地址',
						icon:"none"
					})
				}
			}
		},
		onLoad(options){
			var result = uni.getStorageSync("token");
			if(result){
				// 页面一加载就获取数据
				dingdanMingXi(options.id).then(res=>{
					console.log(res)
					this.order = res.data.data.orderBase
					this.ordeList = res.data.data.orderItems
					this.yangshi = JSON.parse(this.ordeList[0].productAttr)
				})
			}else{
				uni.showModal({
					title: '登录提示',
					content: "暂未登录，是否立即登录",
					success(res) {
						console.log(res)
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					}
				})
			}
		},
		onShow(){
			if(this.$store.state.dizhi.id){
				//   从地址页面取值  判断是否有其中莫一项，有的话就为真。并且赋值
				this.dizhi = this.$store.state.dizhi
				console.log(this.dizhi)
			}
		}
	}
</script>

<style lang="less" scoped>
.dingdan{
	background-color: #f4e8ab;
	height: 100vh;
	position: relative;
	
	// 头部固定位置
	.titlesHead {
		height: 100rpx;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		color: white;
		display: flex;
		align-items: center;
		background-color: #135a05;
		z-index: 999;
	
		.icon {
			flex: 1;
			padding-left: 40rpx;
			box-sizing: border-box;
		}
	
		.titname {
			flex: 3;
			text-align: center;
		}
	
		.titRight {
			flex: 1;
		}
	}
	
	// 头部固定后面占位置的盒子，不要删除哈
	.zhanwei {
		width: 100%;
		height: 100rpx;
		background-color: #135a05;
	}
	// 收货地址
	.dizhi{
		padding: 0 40rpx;
		background-color: #f4e8ab;
		.xuanzhi{
			width: 100%;
			height: 88rpx;
			font-size: 36rpx;
			line-height: 88rpx;
			border-bottom: 4rpx solid #8b8b8b;
		}
		.shouhuo{
			width: 100%;
			line-height: 88rpx;
			font-size: 26rpx;
			border-bottom: 4rpx solid #8b8b8b;
			margin-bottom: 30rpx;
		}
		.delivery{
			width: 100%;
			line-height: 88rpx;
			font-size: 26rpx;
			border-bottom: 4rpx solid #8b8b8b;
			margin-bottom: 30rpx;
		}
	}
	// 订单详情
	.xinagqing{
		padding: 0 40rpx;
		.box{
			background-color: #f4efef;
			padding:20rpx;
			border-radius: 30rpx;
			box-sizing: border-box;
			// 订单编号
			.numberID{
				line-height: 26rpx;
				height: 88rpx;
				
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 4rpx solid #b5b4b4;
				
			}
			// 订单详情
			.particulars{
				border-bottom: 4rpx solid #b5b4b4;
				padding: 20rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				// align-items: center;
				.lefts{
					width: 162rpx;
					height: 162rpx;
					margin-right: 20rpx;
					background-color: #4CD964;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.rights{
					flex: 1;
					.names{
						font-size: 26rpx;
						display: flex;
						line-height: 60rpx;
						justify-content: space-between;
					}
					.number{
						font-size: 22rpx;
						margin-bottom: 20rpx;
						display: flex;
						color: #909090;
						justify-content: space-between;
					}
					.specification{
						color: #909090;
						font-size: 11rpx;
					}
				}
			}
			// 总价格
			.amountotal{
				display: flex;
				justify-content: flex-end;
				.pramount{
					font-size: 26rpx;
					margin: 20rpx 0;
					line-height: 36rpx;
				}
			}
			// 确定付款
			.btn{
				display: flex;
				justify-content: flex-end;
				.anniu{
					padding: 15rpx 20rpx;
					border: 3rpx solid #555555;
					border-radius: 30rpx;
				}
			}
		}
	}
}
</style>
